<template>
  <div id="detail" class="main-box">
    <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    <div class="outer-box">
      <div class="video-left">
        <video
          ref="myVideo"
          class="video-js vjs-default-skin video-player"
        ></video>
      </div>
      <div class="video-right">
        <div class="title">{{videoDetail.type}}</div>
        <div class="content">
          <span class="content-title">标签:</span
          ><el-tag
            type="success"
            size="small"
            v-for="item in tagList"
            :key="item"
            >{{ item }}</el-tag
          >
        </div>
        <div class="author">
          <span class="author-title">作者:</span>
          <span class="author-content">{{ videoDetail.author }}</span>
        </div>
        <div class="desc">
          <span class="desc-title">描述:</span>
          <span class="desc-content">{{ videoDetail.desc }}</span>
        </div>
        <div class="operate">
          <el-button type="primary" size="small" icon="el-icon-arrow-up">上一个</el-button>
          <el-button type="primary" size="small" icon="el-icon-arrow-down"
            >下一个</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/global.css";
import "video.js/dist/video-js.css";
import videojs from "video.js";
export default {
  name: "detailPage",
  components: {},
  data() {
    return {
      id: '',
      tagList: ["青春", "校园", "女神"],
      videoList: {},
      videoDetail: "",
      options: {
        // height: "580",
        // autoplay: true,
        controls: true,
        // fluid: true, // 自适应宽高
        preload: "none",
        poster: "http://ru6iw5134.hd-bkt.clouddn.com/img/banner_5", // 封面
        playbackRates: [0.5, 1.0, 1.25, 1.5, 2], // 可选的播放速度
        sources: [
          {
            src: "", // 视频URL
            type: "video/mp4",
          },
        ],
      },
    };
  },
  methods: {
    getDetail() {
      this.$http.get("/api/data").then((res) => {
        this.videoList = res.data.list;
        console.log(this.videoList);
        // 处理模拟数据 有后端接口则不需要
        var detailList;
        if(this.id >= 100 && this.id <200) {
          detailList = this.videoList.techArr;
        }else if(this.id >= 200 && this.id < 300){
          detailList = this.videoList.sceneryArr;
        }else if(this.id >= 300 && this.id < 400){
          detailList = this.videoList.beautyArr;
        }else if(this.id >= 400 && this.id < 500){
          detailList = this.videoList.moviesArr;
        }else {
          detailList = this.videoList.lifeArr;
        }
        console.log('detailList-->',detailList);

        // 暂时取第一项
        this.videoDetail = detailList[0];
        this.options.sources[0].src = this.videoDetail.videoUrl;
        this.options.poster = this.videoDetail.cover;
        // 初始化videojs
        this.player = videojs(
          this.$refs.myVideo,
          this.options,
          function onPlayerReady() {
            console.log("Player is ready");
          }
        );
      });
    },
    goBack() {
      this.$router.push("/home");
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#detail {
  height: 82vh;
  .outer-box {
    margin-top: 20px;
    // border: 1px solid yellow;
    display: flex;
    .video-left {
      width: 860px;
      height: 580px;
      padding: 8px;
      background-color: #fff;
      box-sizing: border-box;
      // border: 1px solid blue;
      .video-js {
        width: 100%;
        height: 100%;
      }
    }
    .video-right {
      width: 320px;
      height: 100%;
      // border: 1px solid brown;
      padding: 30px 50px;
      box-sizing: border-box;
      text-align: left;
      background-color: #fff;
      color: #333;
      .title {
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
      }
      .content {
        margin-top: 20px;
        .content-title {
          // font-size: 18px;
          font-weight: bold;
        }
        .el-tag {
          margin-left: 10px;
        }
      }
      .desc {
        margin-top: 15px;
        line-height: 30px;
        height: 355px;
        // border: 1px solid pink;
        .desc-title {
          font-weight: bold;
        }
        .desc-content {
          margin-left: 10px;
          font-size: 14px;
          color: #666;
        }
      }
      .author {
        margin-top: 25px;
        line-height: 30px;
        .author-title {
          font-weight: bold;
        }
        .author-content {
          margin-left: 10px;
          font-size: 14px;
          color: #666;
        }
      }
      .operate {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>